<template>
  <u-popup v-model="show" mode="right" width="100%" border-radius="14">
    <div class="box">
      <div class="box-item" v-if="marketEnable">
        <div class="func-title">商品状态</div>
        <div class="func-content">
          <div class="func-item" @click="handleClickMarketEnableWay(item)" :class="{'active':item.selected}" v-for="(item,index) in marketEnableWay" :key="index">
            {{item.label}}
          </div>
        </div>
      </div>
      <div class="box-item" v-if="orderStatus">
        <div class="func-title">订单状态</div>
        <div class="func-content">
          <div class="func-item" @click="handleClickOrderStatus(item)" :class="{'active':item.selected}" v-for="(item,index) in orderStatusList" :key="index">
            {{item.label}}
          </div>
        </div>
      </div>
      <div class="box-item" v-if="date" @click="handleClickDate()">
        <div class="func-title">日期选择</div>
        <div class="func-content">
          <u-input placeholder="请选择日期" v-model="dates" @click="handleClickDate()" disabled :custom-style="inputStyle"></u-input>
        </div>
      </div>

      <div class="box-item" v-if="memberName">
        <div class="func-title">会员名称</div>
        <div class="func-content">
          <u-input placeholder="请输入会员名称" v-model="params.memberName" :custom-style="inputStyle"></u-input>
        </div>
      </div>
      <div class="box-item" v-if="goodsName">
        <div class="func-title">商品名称</div>
        <div class="func-content">
          <u-input placeholder="请输入商品名称" v-model="params.goodsName" :custom-style="inputStyle"></u-input>
        </div>
      </div>
      <div class="submit" @click="callback">确定</div>
      <div class="clear" @click="clear">清空</div>
    </div>
    <u-calendar v-model="showDate" range-color="#fff" range-bg-color="#333" active-bg-color="#333" mode="range" @change="changedCalendar "></u-calendar>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      marketEnableWay: [
        { value: "DOWN", label: "下架", selected: false },
        { value: "UPPER", label: "上架", selected: false },
      ],
      show: false, // 默认引入不显示
      showDate: false, //是否默认打开日期选择
      dates: "",
      orderStatusList: [],
      params: {
        orderStatus: "",
        date: [],
        memberName: "",
        goodsName: "",
        marketEnable:""
      },
      inputStyle: {
        background: "#f7f7f7",
        "padding-left": "20rpx",
        "border-radius": "10rpx",
      },
    };
  },
  props: {
    // 是否显示商品状态
    marketEnable: {
      type: Boolean,
      default: false,
    },
    // 是否显示日期控件
    date: {
      type: Boolean,
      default: false,
    },
    // 是否显示订单状态
    orderStatus: {
      type: Boolean,
      default: false,
    },
    // 是否显示会员名称
    memberName: {
      type: Boolean,
      default: false,
    },
    // 是否显示商品名称
    goodsName: {
      type: Boolean,
      default: false,
    },
    //
  },
  mounted() {
    this.init(); //初始化组件
  },
  methods: {
    // 初始化弹出层
    init() {
      this.orderStatus ? this.bindOrderStatus() : "";
    },
    // 绑定订单状态
    bindOrderStatus() {
      let orderStatus = this.$options.filters.orderStatusWay;

      this.orderStatusList = Object.keys(orderStatus).map((item) => {
        return { value: item, label: orderStatus[item], selected: false };
      });
    },
    // 点击订单状态
    handleClickOrderStatus(val) {
      this.orderStatusList.map((item) => (item.selected = false));
      val.selected = true;
      this.params.orderStatus = val.value;
    },
    // 点击商品状态
    handleClickMarketEnableWay(val) {
      this.marketEnableWay.map((item) => (item.selected = false));
      val.selected = true;
      this.params.marketEnable = val.value;
    },
    // 点击日期选择
    handleClickDate() {
      this.showDate = true;
    },
    // 回调日期选择
    changedCalendar(val) {
      const { startDate, endDate } = val;
      this.params.date[0] = startDate;
      this.params.date[1] = endDate;
      this.dates = `${startDate} - ${endDate}`;
    },
    // 清空回调信息
    clear() {
      this.orderStatusList.map((item) => (item.selected = false));
      this.params.data = [];
      this.params.memberName = "";
      this.params.goodsName = "";
      this.params.marketEnable = ""
      this.dates = ""
      this.callback("clear");
    },
    // 回调筛选的信息
    callback(type) {
      /**
       * 回调会筛选出空值
       */
      let data = {};
      Object.keys(this.params).forEach((key) => {
        this[key] ? Object.assign(data, { [key]: type == "clear" ? "" : this.params[key],  }) : "";
      });
      this.show = false;
      this.$emit("callback", data);
    },
    // 开启弹出层
    open() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 34rpx;
  margin: 20rpx 0;
}
.box-title {
  font-size: 36rpx;
  color: #999;
}
.box-item {
  margin: 40rpx 0;
}
.func-content {
  display: flex;
  flex-wrap: wrap;
  margin: 20rpx 0;
}
.func-title {
  font-weight: bold;
}
.func-item {
  margin: 10rpx;
  font-size: 24rpx;
  background: #f7f7f7;
  border-radius: 10rpx;
  padding: 12rpx 20rpx;
  transition: 0.35s;
}
.active {
  background: #333;
  color: #fff;
}
/deep/ .u-btn--primary {
  border-color: #333 !important;
  background-color: #333 !important;
}
.clear,
.submit {
  border-radius: 20rpx;
  height: 70rpx;

  text-align: center;
  margin: 80rpx auto 0 auto;
  line-height: 70rpx;
}
.submit {
  background: #333;
  color: #fff;
}
.clear {
  box-sizing: border-box;
  border: 2rpx solid #333;
  color: #333;
  margin: 20rpx auto 0 auto;
}
</style>